<template>
  <div class="table-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-descriptions v-for="(item,index) in props.row.serviceList" :key="index" direction="vertical" border>
            <el-descriptions-item label="服务名称">{{ item.serviceName }}</el-descriptions-item>
            <el-descriptions-item label="材料名称">{{ item.materialName }}</el-descriptions-item>
            <el-descriptions-item label="材料数量">{{ item.number }}</el-descriptions-item>
          </el-descriptions>
          <!-- <div v-for="(item,index) in props.row.serviceList" :key="index"><span>{{ item.serviceId }}</span></div> -->
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="订单编号"
        prop="id"
        align="center"
      /> -->
      <el-table-column
        label="序号"
        type="index"
        width="50"
        align="center"
      />

      <el-table-column
        label="预约时间"
        prop="agreeTime"
        align="center"
      />
      <el-table-column
        label="开始时间"
        prop="startTime"
        align="center"
      />
      <el-table-column
        label="结束时间"
        prop="endTime"
        align="center"
      />
      <el-table-column
        label="金额"
        align="center"
        prop="cost"
      />
      <el-table-column
        label="发起人"
        align="center"
        prop="customer"
      />
      <el-table-column
        label="状态"
        prop="status"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag
            :type="statusHandler(scope.$index,scope.row)"
            disable-transitions
          >{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="美容进度" align="center" width="150">
        <template slot-scope="scope">
          <el-progress type="circle" :percentage="scope.row.beautyProgress" :width="80" :color="colorMethod" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status==='已结束'"
            size="medium"
            icon="el-icon-edit-outline"
            title="评价"
            round
            @click="assessHandler(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <AssessDialog
      :id="chooseData.id"
      :dialog-visible="dialogFormVisible"
      @closeDialog="closeHandler"
      @assessDialog="assessHandler"
      @getTable="getTable"
    />
  </div>
</template>

<script>
import { getOrderList } from '@/api/myOrder'
import { getServiceInfo } from '@/api/beautyService'
import { getStockMaterialInfo } from '@/api/stock'
import { parseTime } from '@/utils/index'
import AssessDialog from './assessDialog'
export default {
  name: 'OrderTable',
  components: { AssessDialog },
  props: {
    status: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      tableData: null,
      loading: false,
      dialogFormVisible: false,
      chooseData: {
        id: ''
      }
    }
  },
  created() {
    this.getTable()
  },
  // updated() {
  //   this.getTable()
  // },
  methods: {
    getTable() {
      const query = {}
      if (this.status !== '全部') { query.status = this.status }
      query.customer = this.$store.getters.name
      this.loading = true
      getOrderList(query).then(res => {
        if (res) {
          const orderList = res.data.list
          orderList.forEach(element => {
            element.agreeTime = parseTime(element.agreeTime, '{y}-{m}-{d}')
            element.startTime = parseTime(element.startTime, '{y}-{m}-{d}')
            element.endTime = parseTime(element.endTime, '{y}-{m}-{d}')
            element.serviceList.forEach(element => {
              this.getServiceName(element.serviceId).then(res => {
                element.serviceName = res
              })
              if (element.materialId) {
                this.getMaterialInfo(element.materialId).then(res => {
                  element.materialName = res
                })
              }
            })
          })
          this.tableData = orderList
          setTimeout(() => {
            this.loading = false
          }, 1 * 1000)
        }
        this.loading = false
      })
    },
    async getServiceName(id) {
      const res = await getServiceInfo(id)
      return res.data.data.name
    },
    async getMaterialInfo(id) {
      const res = await getStockMaterialInfo(id)
      return res.data.data.name + '：' + res.data.data.introduction
    },
    statusHandler(index, row) {
      if (row.status === '预约成功') {
        return 'success'
      } else if (row.status === '预约失败') {
        return 'danger'
      } else if (row.status === '预约中') {
        return 'warning'
      } else if (row.status === '已结束') {
        return 'info'
      } else {
        return 'primary'
      }
    },
    assessHandler(index, row) {
      this.chooseData.id = row.id
      this.dialogFormVisible = true
    },
    closeHandler() {
      this.dialogFormVisible = false
      this.chooseData = {
        id: ''
      }
    },
    colorMethod(percentage) {
      if (percentage <= 20) {
        return '#ff3300'
      } else if (percentage <= 40) {
        return '#ff7500'
      } else if (percentage <= 60) {
        return '#bddd22'
      } else if (percentage <= 90) {
        return '#a3d900'
      } else if (percentage === 100) {
        return '#00bc12'
      }
    }
  }
}
</script>

<style lang="scss">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
